/**
 *
 * @title Spliter拖拽分割器,上下分割
 * @description 增加纯图标的折叠布局
 * @type other
 * demo12
 */

import { Icon, Layout, Select, Skeleton } from '@tinper/next-ui';
import { Component } from 'react';
import VisitorVolume from './component/visitorVolume';
import Dashboard from './component/Dashboard';
const Option = Select.Option;

const { Spliter } = Layout;

class LogView extends Component {
    
    
    constructor(props){
        super(props);
    }

    state={
        collapsed: false,
        data:'',
    }
    onCollapse = (collapsed: boolean) => {
         console.log('onCollapse', collapsed);
         this.setState({
             collapsed: !this.state.collapsed
         })
     }

     render() {
         let {collapsed} = this.state;

         return (
             <Layout className="layout-spliter-demo13">
                 <Spliter
                     size={50}
                     collapsible
                     collapsed={collapsed}
                     resizerClassName="wui-spliter-gradient" // 设置此类名用于实现分割线渐变效果
                     trigger={!collapsed ? <Icon rotate={180} type="uf-gridcaretdown" /> : <Icon type="uf-gridcaretdown" />}
                     direction="horizontal"
                     onCollapse={this.onCollapse}
                     style={{overflow: 'unset'}}
                     resizerable={false}
                 >
                     <div>
                         <Select defaultValue="all" style={{ width: 200, marginRight: 6 }}>
                             <Option value="all">全部</Option>
                             <Option value="confirming">待确认</Option>
                             <Option value="executing">执行中</Option>
                             <Option value="completed" disabled>已办结</Option>
                             <Option value="termination">终止</Option>
                         </Select>
                     </div>
                     {/* <Skeleton fieldid="test" /> */}
                     {/* <VisitorVolume/> */}
                     <Dashboard/>
                 </Spliter>
             </Layout>
         )
     }
}

export default LogView;